<template>
  <div class="left">
    <div class="left_box" id="left_1">
      <!-- 设施总览 -->
      <div class="left_top">
        <div class="top" style="color: #fff">
          昨日供水总量/日
          <span style="color: #f9e816">16499</span>
        </div>
        <div>
          <span>
            水质合格率:
            <span style="color: #f9e816">100%</span>
          </span>
        </div>
      </div>
      <div class="left_bottom">
        <div
          class="left_bottomItem"
          v-for="(item, index) in getOverview.Overview"
          :key="index"
        >
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="left_box" id="left_2">
      <div id="canvasLeft_2" style="width: 300px; height: 212px"></div>
    </div>
    <div class="left_box" id="left_3">
      <div id="waterQuality" class="board-content">
        <div class="water-top">
          <div class="water-width">水厂</div>
          <div class="water-width">余氧</div>
          <div class="water-width">浊度</div>
          <div class="water-width">pH</div>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              v-for="(item, index) in waterPlantLeft"
              :key="index"
              class="swiper-slide"
            >
              <div style="width: 170px">
                {{ item.waterPlantName }}
              </div>
              <div class="water-width">{{ item.residualOxygen }}</div>
              <div class="water-width">{{ item.turbidity }}</div>
              <div class="water-width">{{ item.ph }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="right_box" id="right_1">
      <div id="waterQuality" class="board-content">
        <div class="water-top">
          <div class="water-width">水厂</div>
          <div class="water-width">余氧</div>
          <div class="water-width">浊度</div>
          <div class="water-width">pH</div>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              v-for="(item, index) in waterPlantLeft"
              :key="index"
              class="swiper-slide"
            >
              <div style="width: 170px">
                {{ item.waterPlantName }}
              </div>
              <div class="water-width">{{ item.residualOxygen }}</div>
              <div class="water-width">{{ item.turbidity }}</div>
              <div class="water-width">{{ item.ph }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_box" id="right_2">
      <div id="waterQuality" class="board-content">
        <div class="water-top">
          <div class="water-width">水厂</div>
          <div class="water-width">余氧</div>
          <div class="water-width">浊度</div>
          <div class="water-width">pH</div>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              v-for="(item, index) in waterPlantLeft"
              :key="index"
              class="swiper-slide"
            >
              <div style="width: 170px">
                <!-- <span><img :src="item.img" /></span> -->
                {{ item.waterPlantName }}
              </div>
              <div class="water-width">{{ item.residualOxygen }}</div>
              <div class="water-width">{{ item.turbidity }}</div>
              <div class="water-width">{{ item.ph }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_box" id="right_3">
      <div id="rightBox_3" style="width: 300px; height: 200px"></div>
    </div>
  </div>
  <div id="map"></div>

  <!-- 弹框 -->
  <dialog-component
    v-if="dialogVisible"
    @openClick="openClick"
    @openClose="openClose"
    @tabTitleClick="tabTitleClick"
    @tabClick="tabClick"
    :httpUrl="httpUrl"
    :tabsModelId="tabsModelId"
    :waterNameArr="waterNameArr"
    :videUrl="videUrl"
    :dialogVisible="dialogVisible"
  />
</template>

<script>
//导入相关配置信息
import DialogComponent from './DialogComponent.vue'
import 'ol/css'
import XYZ from 'ol/source/XYZ' // 添加这行导入语句
import { defaults as defaultControls, FullScreen } from 'ol/control'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { Icon, Style, Text, Fill } from 'ol/style'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import Tile from 'ol/layer/Tile.js'
import { TileSuperMapRest } from '@supermap/iclient-ol'
import { water_factory_data } from './List/水厂点位list'
import {
  postConfiguration,
  postTrees,
  postOpenVideUrl,
  getOverview,
} from '../http/http'
import * as echarts from 'echarts'
import Swiper from 'swiper'
// import 'swiper/swiper-bundle.min.css'

export default {
  components: {
    DialogComponent,
  },
  // name:"Map",
  data() {
    return {
      map: null,
      markers: [
        { lng: 118.674767, lat: 37.434751, iconUrl: 'icon_url_here' }, // 替换 'icon_url_here' 为图标的 URL
        // 可以添加更多的点位信息
      ],
      water_factory_data,
      dialogVisible: false,
      waterNameArr: [],
      httpUrl: '',
      videUrl: '',
      tabsModelId: '',
      waterNameActive: '',
      getOverview,
      waterPlantLeft: [
        {
          waterPlantName: '第一水厂',
          residualOxygen: '0.41',
          turbidity: '15.2',
          ph: '43.2',
          img: '../img/waterWorks/play.png',
        },
        {
          waterPlantName: '第二水厂',
          residualOxygen: '0.61',
          turbidity: '13.2',
          ph: '13.2',
          img: '../img/waterWorks/play.png',
        },
        {
          waterPlantName: '第三水厂',
          residualOxygen: '0.31',
          turbidity: '15.2',
          ph: '6.4',
          img: '../img/waterWorks/play.png',
        },
        {
          waterPlantName: '第四水厂',
          residualOxygen: '0.51',
          turbidity: '17.2',
          ph: '7.3',
          img: '../img/waterWorks/play.png',
        },
        {
          waterPlantName: '第四水厂',
          residualOxygen: '0.51',
          turbidity: '17.2',
          ph: '89',
          img: '../img/waterWorks/play.png',
        },
        {
          waterPlantName: '第四水厂',
          residualOxygen: '0.51',
          turbidity: '17.2',
          ph: '90',
          img: '../img/waterWorks/play.png',
        },
      ],
    }
  },
  mounted() {
    this.initMap()
    this.initMap_Left_2()
    this.SwiperData()
    this.initMap_Right_3()
  },
  methods: {
    initMap_Right_3() {
      var chartDom = document.getElementById('rightBox_3')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
          axisLabel: {
            textStyle: {
              color: 'white', // 设置文字颜色为白色
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'white', // 设置文字颜色为白色
            },
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
        ],
      }

      option && myChart.setOption(option)
    },
    SwiperData() {
      new Swiper('.swiper-container', {
        direction: 'vertical', // 设置为垂直方向滑动
        loop: true, // 开启循环模式
        autoplay: {
          delay: 3000, // 自动切换间隔时间为3秒
        },
        slidesPerView: 5, // 每次显示的轮播项数量
      })
    },
    initMap() {
      this.map = new Map({
        //1.创建地图对象 new Map()
        target: 'map', //2.绑定 div 元素
        layers: [
          //图层数组 layers
          new TileLayer({
            name: '天地图',
            source: new XYZ({
              crossOrigin: 'anonymous',
              url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d6539c1747bf5296bfe35b02151d761a',
            }),
          }),
          new TileLayer({
            name: '注记',
            source: new XYZ({
              crossOrigin: 'anonymous',
              url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=d6539c1747bf5296bfe35b02151d761a',
            }),
          }),
        ],
        view: new View({
          //视图 View
          projection: 'EPSG:4326',
          center: [118.674767, 37.434751],
          zoom: 9,
        }),

        controls: defaultControls({
          //默认控件
          zoom: false,
          rotate: false,
          attribution: false,
          center: [118.281212, 37.557915],
        }).extend([
          //添加新控件
          new FullScreen(),
        ]),
      })

      const mapLayer = new Tile({
        visible: true,
        source: new TileSuperMapRest({
          url: 'http://10.204.170.214:8090/iserver/services/map-dy20240229/rest/maps/cspmpipe_ss?prjCoordSys=%7B%22epsgCode%22:4326%7D',
          wrapX: true,
          // projection: "EPSG:4326",
          crossOrigin: 'anonymous',
        }),
        projection: 'EPSG:4326',
      })
      const mapLayer1 = new Tile({
        visible: true,
        source: new TileSuperMapRest({
          url: 'http://10.204.170.214:8090/iserver/services/map-dy20240229/rest/maps/cspmpipe_jy?prjCoordSys=%7B%22epsgCode%22:4326%7D',
          wrapX: true,
          // projection: "EPSG:4326",
          crossOrigin: 'anonymous',
        }),
        projection: 'EPSG:4326',
      })
      this.map.addLayer(mapLayer)
      this.map.addLayer(mapLayer1)
      // 创建一个 VectorSource
      const vectorSource = new VectorSource()

      // 创建一个 VectorLayer，并将 VectorSource 添加到其中
      const vectorLayer = new VectorLayer({
        source: vectorSource,
      })

      this.water_factory_data.features.forEach((v) => {
        var a = new Feature({
          geometry: new Point(
            [v.properties.lon, v.properties.lat],
            [v.properties.id, v.properties.name]
          ),
        })

        a.setStyle(
          new Style({
            image: new Icon({
              src: '/icon/水厂.png',
              scale: 0.02,
            }),
            text: new Text({
              text: v.properties.name,
              offsetY: 20, // 调整文本位置，使其显示在图标下方
              textAlign: 'center', // 文本水平居中
              font: '10px sans-serif', // 字体样式
              fill: new Fill({ color: 'black' }), // 文本颜色
            }),
          })
        )
        // // 为每个要素添加点击事件监听器
        // 为每个要素添加点击事件监听器
        vectorLayer.getSource().addFeature(a)
      })
      this.map.addLayer(vectorLayer)

      this.map.on('singleclick', (evt) => {
        if (this.map.hasFeatureAtPixel(evt.pixel)) {
          var feature = this.map.getFeaturesAtPixel(evt.pixel)
          let id = feature[0].values_.geometry.layout[0]
          this.waterNameActive = feature[0].values_.geometry.layout[1]
          this.dialogVisible = true
          postConfiguration({ configurationId: id }).then((res) => {
            this.httpUrl = res.data
          })
        } else {
          console.log('点击的像素点上没有要素')
        }
      })
    },
    initMap_Left_2() {
      /*左二*/

      var chartDom = document.getElementById('canvasLeft_2')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      }

      option && myChart.setOption(option)
    },

    tabClick(value) {
      let pid = value.props.name.split('_')[1]
      this.postOpenVide(pid)
    },
    tabTitleClick(e) {
      if (e.props.name === '2') {
        console.log('执行')
        postTrees().then((res) => {
          let luChen = res.data?.[0]?.[0]
          let luXing = res.data?.[0]?.[1]
          let luChenList = luChen.children?.[0]?.children
          let luXingList = luXing.children
          // 初始化为空
          const waterArr = []

          luChenList.forEach((item) => {
            if (
              item.alias &&
              this.waterNameActive == item.alias.split('-')[0]
            ) {
              waterArr.push(item)
              this.waterNameArr = waterArr
              this.tabsModelId = waterArr[0].id
              this.postOpenVide(waterArr[0].id.split('_')[1])
            }
          })
          luXingList.forEach((it) => {
            it.children.forEach((item) => {
              if (
                item.alias &&
                this.waterNameActive == item.alias.split('-')[0]
              ) {
                if (
                  item.alias &&
                  this.waterNameActive == item.alias.split('-')[0]
                ) {
                  this.waterNameArr.push(item)
                }
              }
            })
          })
        })
      }
    },
    // 视频监控接口
    postOpenVide(pid) {
      postOpenVideUrl({
        origin: 'http://10.204.171.95',
        channelIdQueryList: [pid],
      }).then((res) => {
        let url = res.data[0][0]?.playUrl
        this.videUrl = url
      })
    },
    openClick() {
      // this.editableTabsValue = '1'
    },
    // 关闭弹窗清除数据
    openClose() {
      this.dialogVisible = false
      // this.waterNameArr = []
      // this.httpUrl = ''
      // this.videUrl = ''
    },
    // 数据总览+各水厂昨日供水量及占比
  },
}
</script>

<style lang="scss">
@import '../css/overViewCss.scss';
</style>
